<template>
  <div class="account-info">
    <div class="inner">
      <div class="user-info">
        <!-- 头像 -->
        <div class="toux">
          <el-avatar size="large"
            src="https://static.ibox.art/file/oss/test/image/portrait/3559489f7a4049f597f4e4cfb43aa76f.png?style=st" />
        </div>

        <div class="user-detail">
          <div class="name">
            <div class="name-text">个人昵称:{{ nickname }}</div>
            <div class="walletAddress">个人账号:{{ username }}</div>
            <el-button class="ziliao" @click="dialogFormVisible = true" type="info" round>
              <el-icon>
                <Edit />
              </el-icon>编辑资料
            </el-button>
            <el-dialog v-model="dialogFormVisible" title="编辑资料" width="500px" style="border-radius:15px;">
              <span>呢称</span>
              <el-form :model="form" label-width="">
                <el-form-item label="">
                  <el-input v-model="form.name" />
                </el-form-item>

                <span>个人简介</span>
                <el-form-item label="">
                  <el-input v-model="form.nickname" type="textarea" />
                </el-form-item>

                <span>个人头像</span>
                <el-form-item>
                  <el-upload ref="upload" action="#" list-type="picture" :auto-upload="false" :limit="1"
                    :on-change="changeIamge" :disabled="imageData != null" :http-request="beforeUpload">
                    <template #trigger>
                      <el-button slot="trigger" size="small" type="primary" :disabled="imageData != null">选取文件
                      </el-button>
                    </template>
                    <el-button slot="trigger" size="small" type="warning" @click="cancelChoose"
                      style="margin-left:20px;">
                      取消</el-button>
                    <template #tip>
                      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过2MB</div>
                    </template>
                  </el-upload>
                </el-form-item>

                <el-form-item>
                  <el-button type="success" class="upload_c" @click="upload()">修改</el-button>
                </el-form-item>
              </el-form>

            </el-dialog>
          </div>
        </div>

        <div class="btns">
          <el-button type="info" round @click="orders">
            <el-icon>
              <Document />
            </el-icon>订单查看
          </el-button>
          <el-button type="info" round>
            <el-icon>
              <StarFilled />
            </el-icon>提现
          </el-button>
          <el-button type="info" round @click="signout">
            <el-icon>
              <SwitchButton />
            </el-icon>退出
          </el-button>
        </div>

      </div>
    </div>

  </div>
  <el-drawer v-model="ju" :show-close="false" size="50%">
    <template #header="{ close, titleId, titleClass }">
      <h4 :id="titleId" :class="titleClass">全部订单</h4>
      <el-button type="danger" @click="close">
        <el-icon class="el-icon--left">
          <CircleCloseFilled />
        </el-icon>

      </el-button>
    </template>
    <el-table :data="list" border style="width: 100%">
      <el-table-column prop="id" label="id" width="50" />
      <!-- <el-table-column prop="cimg" label="订单信息" width="180" /> -->
      <el-table-column prop="cname" label="商品名称" width="100">
      </el-table-column>
      <el-table-column prop="ordertime" label="交易时间" width="180"></el-table-column>

      <el-table-column prop="ordersId" label="订单编号" width="150" />
      <el-table-column label="操作">
        <template #default="a">
          <el-button link type="primary" size="small" @click="del(a.row)">
            删除
          </el-button>
        </template>

      </el-table-column>
    </el-table>
  </el-drawer>

  <el-dialog v-model="centerDialogVisible" title="提示" width="30%" center>
    <span>
      确定删除
    </span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dell">
          确定删除
        </el-button>
      </span>
    </template>
  </el-dialog>

  <div class="list-container">
    <el-menu default-active="/shop/" text-color="#000000" active-text-color="#ffffff" background-color="#f8fbff"
      class="el-menu-demo" mode="horizontal" @select="handleSelect" :router="true">
      <el-menu-item index="/shop/">藏品</el-menu-item>
      <el-menu-item index="/shop/sale">已发布</el-menu-item>
      <el-menu-item index="3">已卖出</el-menu-item>
    </el-menu>
  </div>
  <!-- <div class="list-container">
    <el-tabs type="border-card" class="demo-tabs">
      <el-tab-pane label="藏品">
        <UserCollection></UserCollection>
      </el-tab-pane>
      <el-tab-pane label="已发布" style="width: 166px; height: 56px;" >Role</el-tab-pane>
      <el-tab-pane label="已卖出" style="width: 166px; height: 56px;">Task</el-tab-pane>
    </el-tabs>
  </div> -->
  <router-view></router-view>
</template>



<script>
import { ElMessage } from 'element-plus'
// import { Edit } from '@element-plus/icons-vue'

import UserCollection from './UserCollection.vue';


export default {
  components: {
    UserCollection,
  },
  name: 'Shop',

  data() {
    return {
      id: '',
      centerDialogVisible: false,
      list: [],
      ju: false,
      dialogFormVisible: false,
      form: {
        name: window.sessionStorage.getItem("token"),
        nickname: window.sessionStorage.getItem("nickName"),
        previewPath: ''
      },
      imageUrl: '',
      active: '/shop/usercoll',
      username: '',
      nickname: '',
      imageData: null,
      active: '/shop/usercoll',
    };
  },


  mounted() {

  },

  methods: {
    del(a) {
      // console.log(a.id);
      this.id = a.id;
      this.centerDialogVisible = true;

    },
    //退出方法
    signout() {
      sessionStorage.removeItem("token");
      location.reload();
      this.$router.push('/');
    },
    dell() {
      console.log(222);
      this.$http.get("http://localhost:8080/user/delById?id=" + this.id)
        .then((result) => {
          if (result.meta.status === 200) {
            ElMessage({
              showClose: true,
              message: '删除成功',
              type: 'success',
            })
          }


        }).catch((err) => {

        });
      this.orders();
      this.centerDialogVisible = false;
    },
    orders() {
      this.ju = true;
      var url = 'http://localhost:8080/user/queryAllOrders';
      this.$http.post(url)
        .then((result) => {
          // console.log(result);
          this.list = result.data;
          // console.log(this.list);
          for (var i = 0; i < this.list.length; i++) {
            this.list[i].ordertime = new Date(this.list[i].ordertime).toJSON().replace(/T|Z|(\.\D{3})/g, " ").trim()
          }

        }).catch((err) => {

        });
    },

    handleAvatarSuccess(response, uploadFile) {
      imageUrl.value = URL.createObjectURL(uploadFile.raw)
    },

    beforeAvatarUpload(rawFile) {
      console.log(rawFile.type);
      if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') {
        ElMessage.error('Avatar picture must be JPG or PNG format!')
        return false
      } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('Avatar picture size can not exceed 2MB!')
        return false
      }
      return true
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    // 页面显示
    show() {
      this.username = window.sessionStorage.getItem("token");
      this.nickname = window.sessionStorage.getItem("nickName");

    },
    // 修改
    upload() {
      let that = this;
      if (that.imageData == null) {
        that.$alert("请选择图片再进行上传操作");
        return;
      }
      if (this.beforeAvatarUpload(that.imageData)) {
        let data = new FormData();
        data.append("username", that.form.name);
        data.append("nickname", that.form.nickname);
        data.append("photo", that.imageData)
        let url = 'http://localhost:8080/user/update';

        that.$http.post(url, data, {
          'Content-type': 'multipart/form-data'
        })
          .then((res) => {
            if (res.meta.status == 200) {
              ElMessage({
                message: '修改成功',
                type: 'success',
              });
              that.dialogFormVisible = false;
              window.sessionStorage.setItem("nickName", that.form.nickname);
              location.reload();
            } else {
              ElMessage({
                message: '修改失败',
                type: 'fail',
              })
            }

          });
      }

    },
    changeIamge(file) {
      console.log(file);
      this.imageData = file.raw;
    },
    cancelChoose() {
      this.imageData = null;
      this.$refs.upload.clearFiles();
    },
  },
  created() {
    this.show();
  }
};
</script>

<style lang="css" scoped>
.account-info {
  width: 100%;
  padding: 50px 0;
  height: 112px;
  background: #2c2c34;
}

.inner {
  width: 1200px;
  padding: 0 15px;
  margin: 0 auto;
  margin-top: -20px;
}

.inner::after {
  content: '';
  display: table;
  clear: both;
}

.user-info {
  align-items: center;
  margin-bottom: 30px;
}


.el-avatar {
  height: 80px;
  width: 80px;
}

.toux {
  float: left;
}

.user-detail {

  -webkit-box-flex: 1;
  flex: 1;
  color: #fff;
  float: left;
  width: 700px;
  height: 65px;

  margin-left: 18px;
  padding: 10px 0;
}

.name {
  font-weight: 700;
  font-size: 26px;
  line-height: 36px;
}

.name-text {
  display: inline-block;
}

.ziliao {
  display: inline-block;
  margin-left: 10px;
  margin-top: -5px;
}

.walletAddress {
  font-size: 16px;
}

.btns {
  float: left;
  margin-top: 10px;
}

.list-container {
  width: 1200px;
  margin: 0 auto;
}

.el-menu {
  border: none;
}

.el-menu li {
  width: 166px;
  height: 56px;
}

.el-tabs__nav-scroll {
  height: 56px !important;
}

.el-tabs__item {

  padding: 0 40px !important;


  font-size: 24px !important;
  font-weight: 500;

}

.el-menu-item.is-active {
  background-color: rgb(44, 44, 52) !important;
}

.el-menu-item::before {
  background-color: transparent !important;
}

/* 头像上传 */
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>